<template>
  <div class="max">
    <!--客户开发计划表回收站-->
    <div class="search">
      <el-input v-model="customerName" placeholder="客户名" class="el-input-1" />
      <el-input v-model="createMan" placeholder="创建人" class="el-input-1" />
      <el-input v-model="chanceSource" placeholder="机会来源" class="el-input-1" />
      <br>
      <el-select v-model="value_state" placeholder="分配状态" class="el-input-1">
        <el-option v-for="item in state" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-select v-model="value_devResult" placeholder="请选择开发状态" class="el-input-1">
        <el-option v-for="item in devResult" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-button type="primary" @click="searchData" style="margin-left: 13px">
        <el-icon style="vertical-align: middle;">
          <search/>
        </el-icon>
        <span style="vertical-align: middle;"> 搜索 </span>
      </el-button>
      <div class="recycle">
        <h1>回收站</h1>
        <svg t="1650607349897" class="icon" viewBox="0 0 1027 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6211" width="120" height="120"><path d="M38.771627 310.656a36.608 36.608 0 1 1 0-73.130667h220.117333a255.957333 255.957333 0 0 1 510.634667 0h220.074666a36.608 36.608 0 1 1 0 73.130667h-76.288L850.37696 919.296c-6.272 59.605333-53.205333 104.661333-109.056 104.661333H287.006293c-55.850667 0-102.784-45.098667-108.928-104.661333L114.931627 310.656H38.771627z m212.053333 599.978667a37.546667 37.546667 0 0 0 36.224 34.901333h454.229333a37.546667 37.546667 0 0 0 36.352-34.901333l62.122667-599.936H188.531627l62.293333 599.936zM696.13696 237.482667a182.826667 182.826667 0 0 0-363.904 0h363.904z m-64.938667 566.997333l-43.904-73.130667h53.504l-63.36-109.781333 41.472-74.581333 116.992 202.624a36.608 36.608 0 0 1-31.744 54.869333h-72.96z m-73.088 0H324.126293a36.48 36.48 0 0 1-31.658666-54.869333l36.48-63.189334 85.290666-1.450666-26.752 46.378666h126.72l43.904 73.130667z m24.277334-320.810667l-41.472 74.624L514.163627 511.914667l-63.36 109.696-85.248 1.493333 116.906666-202.666667a36.522667 36.522667 0 0 1 63.317334 0l36.608 63.232z" p-id="6212" fill="#d81e06"></path></svg>
      </div>
    </div>
    <!--营销机会表回收站-->
    <div class="marketing">
      <h4 style="padding: 10px">营销机会</h4>
      <div class="marketing-1">
        <el-table :data="t_sale_chance" border style="width: 100%; opacity: 0.7;" :header-cell-style="{textAlign: 'center'}"
                  :cell-style="{ textAlign: 'center' }">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column fixed label="编号" prop="id" width="100"></el-table-column>
          <el-table-column label="客户名称" prop="customerName" width="120"></el-table-column>
          <el-table-column label="机会来源" prop="chanceSource" width="120"></el-table-column>
          <el-table-column label="成功几率" prop="cgjl" width="120"></el-table-column>
          <el-table-column label="联系人" prop="linkMan" width="120"></el-table-column>
          <el-table-column label="分配状态" prop="state" width="120">
            <template #default="s">
              <template v-if="s.row.state === 1">
                <el-tag type="danger">已分配</el-tag>
              </template>
              <template v-else>
                <el-tag type="info">未分配</el-tag>
              </template>
            </template>
          </el-table-column>
          <el-table-column label="开发状态" prop="devResult" width="120">
            <template #default="s">
              <template v-if="s.row.devResult === 3">
                <el-tag type="danger">开发失败</el-tag>
              </template>
              <template v-if="s.row.devResult === 2">
                <el-tag type="success">开发成功</el-tag>
              </template>
              <template v-else-if="s.row.devResult === 1">
                <el-tag type="warning">开发中</el-tag>
              </template>
              <template v-else-if="s.row.devResult === 0">
                <el-tag type="info">未开发</el-tag>
              </template>
            </template>
          </el-table-column>
          <el-table-column label="有效状态" prop="isValid" width="120">
            <template #default="s">
              <template v-if="s.row.isValid === 1">
                <el-tag type="success">有效</el-tag>
              </template>
              <template v-else>
                <el-tag type="info">无效</el-tag>
              </template>
            </template>
          </el-table-column>
          <el-table-column label="概要" prop="overview" width="120"></el-table-column>
          <el-table-column label="联系电话" prop="linkPhone" width="120"></el-table-column>
          <el-table-column label="描述" prop="description" width="120"></el-table-column>
          <el-table-column label="创建人" prop="createMan" width="120"></el-table-column>
          <el-table-column label="创建时间" prop="createDate" width="170"></el-table-column>
          <el-table-column label="分配人" prop="assignMan" width="120"></el-table-column>
          <el-table-column label="分配时间" prop="assignTime" width="170"></el-table-column>
          <el-table-column fixed="right" label="操作" width="160">
            <template #default="xxx">
              <el-tooltip placement="top">
                <template #content>还原营销机会</template>
                <el-button size="mini" type="primary" @click="restore(xxx.row)">还原</el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页控件 -->
        <el-pagination background layout="total, prev, pager, next, jumper" :current-page="no" :page-size="size"
                       :total="total" @current-change="currentChange">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {h, ref} from "vue";
import {deleted,restore} from "../../../network/marketing";
export default {
  name: "MarRecycle",
  data(){
    return{
      customerName: ref(''), //客户名称
      createMan: ref(''), //创建人
      chanceSource: ref(''),//机会来源
      //选择开发状态
      devResult: [
        {

        },
        {
          value: 0,
          label: '未开发',
        },
        {
          value: 1,
          label: '开发中',
        },
        {
          value: 2,
          label: '已开发',
        },
        {
          value: 3,
          label: '开发失败',
        }
      ],
      value_devResult: null,
      //分配状态
      state: [
        {

        },
        {
          value: 0,
          label: '未分配',
        },
        {
          value: 1,
          label: '已分配',
        }
      ],
      value_state: null,
      //分页
      t_sale_chance: [],
      cus_dev_plan:[],
      no: 1,
      size: 6,
      total: 0,
    }
  },
  methods:{
    restore(row) {
      this.$msgbox({
        title: '还原操作',
        message: h('p', null, "此操作将该条数据还原，确定继续吗？"),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            instance.confirmButtonText = '还原中...'
            setTimeout(() => {
              done()
              setTimeout(() => {
                instance.confirmButtonLoading = false
              }, 300)
            }, 3000)
          } else {
            done()
          }
        },
      }).then(() => {
        restore(row.id).then(data => {
          this.loadData();
        });
        this.$message({
          type: 'success',
          message: '还原成功！！！'
        })
      })
    },
    //模糊查询
    searchData() {
      this.loadData();
    },
    //查询所有
    loadData() {
      let params = {
        pageNum: this.no,
        pageSize: this.size,
        customerName: this.customerName,
        createMan: this.createMan,
        chanceSource :this.chanceSource,
        state: this.value_state,
        devResult: this.value_devResult
      }
      deleted(params).then(data => {
        console.log('data:', data)
        this.t_sale_chance = data.data;
        this.total = data.total;
      });
    },/**/
    /*分页*/
    init() {
      this.loadData();
    },
    currentChange(n) {
      this.no = n;
      this.loadData();
    },/**/
  },
  /* 钩子函数 */
  created() {
    this.init();
  }
}
</script>

<style scoped>
  .max{
    width: 1300px;
    height: 640px;
    border: 1px solid #fff8e6;
    background: #ffffff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
    /*border-radius: 20px;*/
  }

  .search{
    width: 645px;
    height: 150px;
    border: 0px solid red;
    margin: 25px 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
    border-radius: 20px;
  }
  .recycle{
    width: 550px;
    height: 150px;
    border: 0px solid red;
    margin-left: 700px;
    margin-top: -125px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
    border-radius: 20px;
  }
  .recycle h1{
    margin-left: 100px;
    line-height: 150px;
    font-size: 70px;
    color: #2B4BAB;
  }
  .recycle svg{
    margin: 15px 15px 15px 400px;
    position: relative;
    top: -150px;
  }

  .marketing{
    width: 1255px;
    height: 420px;
    border: 0px solid red;
    margin: 25px 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
    border-radius: 20px;
  }
  .marketing-1{
    width: 1255px;
    height: 70%;
    border: 0px solid gainsboro;
  }
  .el-input-1 {
    width: 180px;
    margin: 20px 10px 10px 20px;
  }
</style>